<template>
  <Card>
    <div class="flexCSB">
      <Button type="primary" @click="getRefund">批量退款</Button>
      <div>
        <Input style="width: 300px" v-model="orderName" placeholder="请输入订单编号" suffix="ios-search"
          @on-enter="enterOrderName"></Input>
        <Input style="width: 300px" v-model="orderTel" placeholder="请输入手机号" suffix="ios-search"
          @on-enter="enterOrderNametel"></Input>
        <Input style="width: 300px" v-model="orderNames" placeholder="请输入姓名" suffix="ios-search"
          @on-enter="enterOrderNames"></Input>
        <el-select @change="statusChange" v-model="status" placeholder="请选择订单状态">
          <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div>

    </div>
    <div class="flexCSB" style="margin-top: 10px">
      <div>
        <RadioGroup v-model="status" type="button" @on-change="change2">
          <Radio label="0">全部</Radio>
          <Radio label="1">待支付</Radio>
          <Radio label="2">待使用</Radio>
          <Radio label="3">已使用</Radio>
          <Radio label="4">已退款</Radio>
          <Radio label="5">退款中</Radio>
          <Radio label="6">交易关闭</Radio>
        </RadioGroup>
        <DatePicker :clearable="clearable" format="yyyy-MM-dd" type="daterange" placeholder="请选择起止时间"
          style="width: 300px" :value="time" @on-change="onChange"></DatePicker>
        <Button type="primary" @click="exddan">批量导出订单</Button>
      </div>
    </div>
    <Table class="table" :loading="loading1" highlight-row :columns="columns" :data="tableData" @on-select="getSelect"
      @on-select-all="getSelectAll" @on-selection-change="getSelectChange"></Table>
    <Page show-total class="page" :total="total" :current.sync="pageNum" :page-size="pageSize" show-elevator
      @on-change="changePage" />
    <Modal :title="modelTitle" v-model="modal" width="40">
      <Form ref="form" :model="order" :rules="rules" :label-width="100">
        <FormItem label="退款原因" prop="reason">
          <Input v-model="order.reason" type="textarea" :rows="4" placeholder="请输入退款原因"></Input>
        </FormItem>
        <Form-item>
          <Button type="primary" @click="handleSubmit('form')">提交</Button>
          <Button @click="handleReset('form')" style="margin-left: 8px">取消</Button>
        </Form-item>
      </Form>
      <div slot="footer">
        <!-- <Button
          class="Button"
          type="primary"
          @click="submit"
          :loading="loading2"
          >确认提交</Button
        > -->
      </div>
    </Modal>
  </Card>
</template>

<script>
import { exportMethod } from "../../../util/push";
export default {
  data() {
    return {
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        { title: "订单编号", key: "orderNum", align: "center", width: 200 },
        {
          title: "活动名称",
          key: "exhibitionName",
          align: "center",
          width: 150,
        },
        {
          title: "联系人姓名",
          key: "contactName",
          align: "center",
          width: 120,
        },
        {
          title: "联系人手机号",
          key: "contactPhone",
          align: "center",
          width: 130,
        },
        { title: "总价", key: "amount", align: "center", width: 120 },
        {
          title: "订单创建时间",
          key: "gmtCreate",
          align: "center",
          width: 200,
        },
        { title: "票张", key: "num", align: "center", width: 80 },
        {
          title: "状态",
          align: "center",
          render: (h, params) => {
            let color = "";
            let content = "";
            let type = "";
            if (params.row.status == 1) {
              color = "yellow";
              content = "待支付";
            } else if (params.row.status == 2) {
              color = "green";
              content = "待使用";
              type = "border";
            } else if (params.row.status == 3) {
              color = "green";
              content = "已使用";
            } else if (params.row.status == 4) {
              color = "red";
              content = "已退款";
              type = "border";
            } else if (params.row.status == 5) {
              color = "red";
              content = "退款中";
            } else if (params.row.status == 6) {
              color = "blue";
              content = "交易关闭";
              type = "border";
            }
            return h(
              "Tag",
              {
                props: { color: color, type: type },
              },
              content
            );
          },
        },
      ],
      tableData: [],
      status: "0",
      statusList: [
        {
          id: "0",
          name: "全部",
        },
        {
          id: "1",
          name: "待支付",
        },
        {
          id: "2",
          name: "待使用",
        },
        {
          id: "3",
          name: "已使用",
        },
        {
          id: "4",
          name: "已退款",
        },
          {
          id: "5",
          name: "退款中",
        },
         {
          id: "6",
          name: "交易关闭",
        },
      ],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loading1: false,
      // loading2: false,
      orderName: "",
      orderTel: "",
      orderNames: "",
      ids: [],
      modal: false,
      order: {
        reason: "", // 展览名称
      },
      time: [new Date(), new Date()],
      rules: {
        reason: [
          { required: true, message: "退款原因不能为空", trigger: "blur" },
        ],
      },

      modelTitle: "退款操作",
      ids: [],
      time: [],
      time2: [],
    };
  },
  created() {
    let time = this.getTime(new Date());
    let time1 = this.getTime(new Date(new Date().getTime() - 86400000 * 5));
    this.time = [time1, time];
    var date = new Date();
    this.time2 = this.getTime(date).split("-");
    this.time2.push(this.getTime(this.getTime4(7)));
    this.time2.push(this.getTime(this.getTime4(1)));
    this.getData();
  },
  mounted() { },
  methods: {
    onChange(data) {
      this.time = data;
      this.current = 1;
      this.getData();

    },
    change2() {
      this.current = 1;
      this.getData();
      console.log(this.getData());

    },
    // 获取数据
    getData() {
      let start = "",
        end = "";
      if (this.time[0] != "" && this.time[1] != "") {
        start = this.time[0];
        end = this.time[1];
      }
      this.loading1 = true;
      this.$http(
        "/ztmuseum/stage/activity-order/getActivityOrderList",
        {
          beginDate: start == undefined ? "" : start,
          endDate: end == undefined ? "" : end,
          current: this.pageNum,
          orderNum: this.orderName, // 订单编号
          size: this.pageSize,
          status: this.status, // 状态 1-待支付 2-待使用 3-已使用 4-已退款
          phone: this.orderTel,
          name: this.orderNames,
        },
        "post",
        (res) => {
          console.log(res);
          if (res.data.code == 1000) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading1 = false;
        }
      );
    },
    //导出订单
    exddan() {
       let start = "",
        end = "";
      if (this.time[0] != "" && this.time[1] != "") {
        start = this.time[0];
        end = this.time[1];
      }
      // let _this = this
      exportMethod({
        url: "/ztmuseum/stage/activity-order/exportActivityOrder",
        method: "post",
        data: {
           "orders": [
            {
              "asc": true,
              "column": ""
            }
          ],
          beginDate: start == undefined ? "" : start,
          endDate: end == undefined ? "" : end,
          activityName: "",
          name: "",
          orderNum: "",
          phone: "",
          status:Number(this.status),
          current: this.pageNum,
          size: this.pageSize,
        }
      })
    },
    statusChange() {
      this.pageNum = 1;
      this.getData();
    },
    enterOrderName() {
      this.pageNum = 1;
      this.getData();
    },
    enterOrderNames() {
      this.pageNum = 1;
      this.getData();
    },
    enterOrderNametel() {
      this.pageNum = 1;
      this.getData();
    },
    // 批量退款
    getRefund() {
      this.show = false;
      this.modal = true;
      this.$refs["form"].resetFields();
    },

    // 退款提交
    handleSubmit(form) {
      let that = this;
      this.$refs[form].validate((valid) => {
        if (valid) {
          // this.$Message.success("提交成功!");
          console.log(this.order);
          this.$http(
            "/ztmuseum/stage/activity-order/batchRefund",
            {
              reason: this.order.reason,
              orderId: this.ids,
            },
            "post",
            (res) => {
              console.log(res);
              console.log(res.data.data);
              if (res.data.code == 1000) {
                that.modal = false;
                that.$Message.success(res.data.msg);
                that.$refs[form].resetFields();
                that.pageNum = 1;
                that.getData();
              } else {
                that.$Message.error(res.data.msg);
              }
            }
          );
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    },
    handleReset(form) {
      this.modal = false;
      this.$refs[form].resetFields();
    },
    // 分页，改变页码
    changePage(data) {
      console.log(data);
      this.pageNum = data;
      this.getData();
    },

    // 选中某一项触发,分别为已选项和刚选择的项。
    getSelect(selection, row) {
      // console.log(selection, row);
    },
    // 点击全选时触发，返回值为已选项
    getSelectAll(selection) {
      // console.log(selection);
    },
    // 只要选中项发生变化时就会触发，返回值为 selection，已选项
    getSelectChange(selection) {
      // console.log(selection);
      this.ids = selection.map((item) => item.id);
      console.log(this.ids);
    },
  },
};
</script>

<style scoped>
</style>
